<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>预警辅助</title>
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>
</head>
<style>
    /*额外增加的修改样式*/
    /*.el-form-item {*/
    /*margin-bottom: 0px !important;*/
    /*}*/

    .el-radio-group {
        margin-top: 7px;
    }

    .el-table__empty-block {
        height: 80% !important;
    }

    .lonlatDiv {
        width: 100%;
    }

    .lonlatDivTip {
        width: 25%;
        float: left;
    }

    .offOnline {
        position: fixed;
        bottom: 14px;
        left: 12px;
        cursor: pointer;
    }

    .topTtile {
        float: left;
        width: 100%;
        height: 40px;
    }

    .topSelectZindexWarning {
        /*right: 16px; */
        position: absolute;
        top: 0px;
    }
    .iframeDiv{
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin: 10px;
    }

    .redbackg{
        background-color: red;
    }
    [v-cloak] {
        display: none;
    }
    /* 自定义横向滚动条样式 */
    .el-table__body-wrapper::-webkit-scrollbar {
        width: 10px; /* 设置滚动条宽度 */
        height: 10px; /* 设置滚动条高度 */
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: skyblue; /* 设置滚动条颜色 */
        border-radius: 10px; /* 设置滚动条圆角 */
    }
</style>
<body>

<div id="main" class="all" v-cloak>
    <div class="allLeft">
        <!-- 左侧菜单栏 -->
        <div class="menuLeft" v-for="(menu,index) in menuLefts" @click="leftSwitch(index)"
             v-bind:class="{menuLeftS: leftNum== index}">
            <img v-bind:src="menu.url"/><br/>{{$t(menu.title)}}<br/>
            <hr/>
        </div>

    </div>
    <div class='allRight rightBaseDiv'>
        <%--实测数据--%>
        <div class="rightTopDiv" v-show="scsj">
           <%-- <div class="topTtile" v-show="realityTableShow">--%>
                <%--硬件属性--%>
                <select-property-hide    @send-property-hide="reallyProValue=$event"   @send-property-hide-first="reallyProValue=$event"></select-property-hide>

                <el-date-picker v-model="reallyTimeValue"
                                type="daterange"
                                range-separator="-"
                                :start-placeholder="$t('homeResultData.begtime')"
                                :end-placeholder="$t('homeResultData.endtime')">
                </el-date-picker>

                <el-button type="primary" @click="loadReality">{{$t('homeResultData.inquiry')}}</el-button>
            <%--</div>--%>

            <%--    原模拟数据
                            <el-button type="primary" class="topSelectRight" @click="weekly">周报</el-button>
                            <el-button type="primary" class="topSelectRight" @click="loadData">{{$t('homeResultData.inquiry')}}</el-button>

                            &lt;%&ndash;层数&ndash;%&gt;
                            <select-tier @send-tier="tierOptionValue=$event"></select-tier>

                            &lt;%&ndash;模拟属性&ndash;%&gt;
                            <select-property-simulate
                                    @send-property-simulate="siteTypeOptionValue=$event"></select-property-simulate>

                            &lt;%&ndash;站点&ndash;%&gt;
                            <select-site @send-site="siteOptionValue=$event"></select-site>

                            <el-date-picker class="topSelectRight"
                                            v-model="imageTimeValue"
                                            type="date" >
                            </el-date-picker>

                            &lt;%&ndash;文件类别&ndash;%&gt;
                            <select-file-his :onemonth="1"  @send-file-his="fileOptionValue=$event"></select-file-his>
            --%>

            <%--            </div>--%>

            <div class="rightTable">
                <el-table :data="tableData" stripe style="width: 100%;top: 20px" :cell-class-name="myclass" v-loading="loading">
                    <el-table-column  type="index" :label="$t('homeResultData.number')" width="120">
                    </el-table-column>
                    <el-table-column prop="dataNameCh" :label="$t('homeResultData.Attributes')">
                    </el-table-column>
                    <%--<el-table-column prop="dataNameEn" :label="标识">--%>
                    <%--</el-table-column>--%>
                    <el-table-column :formatter="common.dateFormatTime" prop="dataTime" :label="$t('homeResultData.time')">
                    </el-table-column>
                    <el-table-column prop="dataValue" :label="$t('homeResultData.value')">
                    </el-table-column>
                    <el-table-column :label="$t('homeSystem.Current_state')">
                        <template slot-scope="scope">
                            <span v-html="warningFormat(scope.row,0)"></span>
                        </template>
                    </el-table-column>
                </el-table>


                    <%--    原模拟数据
                        <el-table-column type="index" :label="$t('homeResultData.number')"  width="120">
                        </el-table-column>
                        <el-table-column prop="hisSite" :label="$t('homeResultData.Site')">
                        </el-table-column>
                        <el-table-column prop="hisTier" :label="$t('homeResultData.Floor')">
                        </el-table-column>
                        <el-table-column prop="hisRemark" :label="$t('homeResultData.Attributes')">
                        </el-table-column>
                        <el-table-column prop="hisTime" :formatter="common.dateFormatTime" :label="$t('homeResultData.time')" width="240">
                        </el-table-column>
                        <el-table-column prop="hisValue" :label="$t('homeResultData.value')">
                        </el-table-column>
                        <el-table-column   :label="$t('homeSystem.Current_state')" >
                            <template slot-scope="scope">
                                <span v-html="warningFormat(scope.row,1)"></span>
                            </template>
                        </el-table-column>
    --%>
                    <%--<el-table-column prop="operation" label="操作">--%>
                    <%--<a style="color: #0CBDD7;">查看详情</a>--%>
                    <%--&lt;%&ndash;<a style="color: #0CBDD7;">地图</a>&ndash;%&gt;--%>
                    <%--</el-table-column>--%>
                </el-table>
                <div class="rightTableFoot">
                    <el-pagination background layout="prev, pager, next" :total="pageCount"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
        </div>
        </div>
        <div class="rightBottemDiv" v-if="iframeDivShow">

            <div class="ResultTop">
                <!-- 上面是统计图 -->
                <div class="topSelect">
                    <div class="topSelectHead" style="    margin-left: 32%;"></div>
                    <div id="eChartsDiv" class="eChartsDiv">
                    </div>
                    <div id="main1"></div>
                </div>
            </div>
            <div class="topSelectZindexleft">
                <div class="topSelectHead" style="    margin-left: 32%;" v-cloak>
                    <div class="divIcon"></div>
                    <span class="topSelectHeadSpan">{{$t('homeResultData.Water_quality')}} </span>
                    <el-select class="topselectLeft" style="margin-top: 20px" v-model="echarttype" @change="loadDate(1)">
                        <el-option v-for="item in echarttypeoptions" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="topSelectZindex">
                <select-property-hide @send-property-hide-first="siteTypeOptionValue=$event"
                                      @send-property-hide="siteTypeOptionValue=$event"
                                      class="topSelectRight"></select-property-hide>
                <el-select class="topSelectRight" v-model="selectedsiteValue" multiple collapse-tags placeholder="请选择"
                           @change="loadDate()">
                    <el-option
                            v-for="item in siteValue"
                            :key="item.id"
                            :label="item.siteName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-date-picker class="topSelectRight"
                                v-model="dateValue"
                                type="daterange"
                                range-separator="-"
                                :start-placeholder="$t('homeResultData.begtime')"
                                :end-placeholder="$t('homeResultData.endtime')">
                </el-date-picker>
            </div>
        </div>

        <div class="iframeDiv" v-if="iframeDivShow1">
            <%--地图查询--%>
            <iframe id="mainIframe" class="iframe" src="${contextPath}/dm3/homeDm3.do"
                    allowtransparency="yes"></iframe>
        </div>
    </div>

</div>


</body>
<script src="${contextPath}/js/echarts.min.js"></script> <!-- 统计图 -->
<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vueApp.js" type="text/javascript" charset="utf-8"></script>
<%--<script src="${contextPath}/js/analogueData.js" type="text/javascript" charset="utf-8"></script> <!-- 模拟数据 -->--%>
<script src="${contextPath}/js/vue-resource.js"></script>

<script src="${contextPath}/js/language/languages.js"  type="text/javascript" charset="utf-8"></script>

<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>
<%--组件 得在实例化前面--%>
<script src="${contextPath}/js/homeJS/component.js"></script>
<%--语言js--%>
<script src="${contextPath}/js/language/vue-i18n.js"></script>

<script src="${contextPath}/js/homeJS/homeWarning.js"></script>



</html>
